<template>
  <div class="father">
    <h3>父组件</h3>
    <h4>银子：{{ money }}万元</h4>
    <h4>车子：一辆{{ car.brand }}车，价值{{ car.price }}万元</h4>
    <Child/>
  </div>
</template>

<!-- 

          1. 概述：实现**祖孙组件**直接通信

          2. 具体使用：

            * 在祖先组件中通过`provide`配置向后代组件提供数据
            * 在后代组件中通过`inject`配置来声明接收数据

            
            在我们的祖先组件中直接使用provide方法去进行数据
            语法为
            provide('自定义的暴露的名字(取的时候要名字相同)',{暴露的值(可以是变量,方法等等)})

            在孙组件中使用`inject`配置项接受数据
            let xxxx = inject('要取的数据的自定义的名字',默认类型(因不会自动帮我们解析,所以会报错,解析器不知道我们的类型是什么,故而可以在这个位置,写我们的默认的值,如果没有获得值,则是多少))
            取了就可以直接使用了
            要用一个变量去接受,如果是多个,可以利用结构赋值
 -->
<script setup lang="ts" name="Father">
import Child from './Child.vue'
import { ref, reactive, provide } from 'vue'

let money = ref(100)
let car = reactive({
  brand: '奔驰',
  price: 100
})
function updateMoney(value: number) {
  money.value -= value
}

// 向后代提供数据
provide('moneyContext', { money, updateMoney })
provide('car', car)

</script>

<style scoped>
.father {
  background-color: rgb(165, 164, 164);
  padding: 20px;
  border-radius: 10px;
}
</style>